<template>
<!-- 为了加脚步添加的大的div -->
<div>
  <br>
  <div class="detail">
    <!-- 页头 -->
    <div class="source" >
      <el-page-header @back="goBack" content="文章详情">
      </el-page-header>
    </div>
    
    <div class="details-header">
      <!-- 标题及作者 -->
      <div class="header-title" style="margin-left:10px">
        <h1>
          <!-- 获取文章Id -->
          <span>{{ $route.params.id }}</span>
          <span class="writer-style">
            <span class="writer">坤</span>
          </span>
        </h1>
      </div>
    </div>
    <hr />
    <!-- 文章内容 -->
    <div class="content">
      <p class="content-text">
        &#8195;&#8195;大漠孤烟直，长河落日圆。一望无垠的大漠，空旷而高远，壮阔而雄浑，当红日西坠，地平线尽头一片殷红，磅礴中亦有种苍凉感。大漠孤烟直，长河落日圆。一望无垠的大漠，空旷而高远，壮阔而雄浑，当红日西坠，地平线尽头一片殷红，磅礴中亦有种苍凉感。上古的烽烟早已在岁月中逝去，黄河古道虽然几经变迁，但依旧在。楚风一个人在旅行，很疲惫，他躺在黄沙上，看着血色的夕阳，不知道还要多久才能离开这片大漠。数日前他毕业了，同时也跟校园中的女神说再见，或许见不到了吧，毕竟他曾被委婉的告知，从此天各一方，该分手了。离开学院后，他便出来旅行。落日很红，挂在大漠的尽头，在空旷中有一种宁静的美。楚风坐起来喝了一些水，感觉精力恢复了不少，他的身体属于修长强健那一类型，体质非常好，疲惫渐消退。站起来眺望，他觉得快要离开大漠了，再走一段路程或许就会见到牧民的帐篷，他决定继续前行。一路西进，他在大漠中留下一串很长、很远的脚印。，再走一段路程或许就会见到牧民的帐篷，他决定继续前行。
      </p>
    </div>
    <!-- 放图片 -->
    <div class="detail-img">
      <img :src="DetailImgs" />
    </div>
    <!-- 点赞评论按钮 -->
    <div class="detail-content-line">
      <!-- 浏览次数 -->
      <span style="float: left; color: #6b6b6b"> 浏览 次 </span>
      <p class="op-list">
        <a><i class="iconfont icon-dianzan1"></i></a>
        <a><i class="iconfont icon-pinglun"></i></a>
      </p>
      <hr />
      <!-- 评论input -->
      
      <div class="comment-box">
        <i v-if="isInput == 0" class="i-text">
          <el-input
            @focus="focusfns"
            type="text"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="100"
            show-word-limit
          >
          </el-input>
        </i>
        <i v-if="isInput == 1" class="i-textarea">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="100"
            show-word-limit
            resize="none"
            autofocus
            ref="gain"
            @focus="fuInput"
            @blur="lostInput1"
          >
          </el-input>
          <br>
          <p></p>
          <div>
            
            <el-button
              type="primary"
              icon="el-icon-edit"
              style="margin-left: 79%;padding-top:10px;margin-top:5px"
              >发表</el-button
            >
         

          </div>
        </i>
      </div>
    </div>
  </div>
  <div class="footer">
    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
    <el-divider></el-divider>
  </div>
  
</div>
  
  
</template>

<script scopt>
export default {
  // 设置背景颜色
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background:#e9faff')
  },
  data () {
    return {
      
      autofocus: false, text: "",
      textarea: "", isInput: "",
      content: "",
      InfoList: [
        {
          id: 1,
          title: "圣墟",
          writer: "辰东",
          content:
            "在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角……",
        },
      ], DetailImgs: require("./img/001313usLig.jpg")
    };
  }, methods: {
    // 评论输入框
    fuInput () {
      if (this.autofocus == true) {
        this.autofocus = false;
        console.log("第二个框获取光标：如果autofocus为TRUE");
      } else {
        console.log("第二个框获取光标：如果autofocus为False");
      }
    },
    //第一个框获取光标
    focusfns () {
      if (this.isInput == 0) {
        this.isInput = 1;
        this.autofocus = true;
        this.$nextTick(() => {
          this.$refs.gain.focus();
        }, 100);
        console.log(this.autofocus);
        console.log("第一个框获取光标：autofocus为True");
      } else {
        // this.isInput = 0;
        console.log(this.isInput);
      }
    },
    //第二个框失去光标
    lostInput1 () {
      if (this.autofocus == false) {
        this.isInput = 0;
        console.log("第二个框失去光标：autofocus为False");
      }
    },
    goBack(){
      this.$router.go(-1)
    }
  },
  // mounted(){
  //   document.body.style.backgroundColor="#e9faff";

  // }
};
</script>

<style scoped>

.detail {
  margin-left: 400px;
  height: 950px;
  background-color: #e9faff;
  width: 710px;
  border: 2px solid #88C6E5;

}
/* 点赞评论 */
.detail-content-line {
  padding-top: 7px;
  padding-left: 10px;
  height: 35px;
  width: 700px;
}

.detail-img {
  width: 690px;
  height: 400;
}
.detail-img img {
  max-width: 100%;
  padding-left: 10px;
  margin-top: 7px;
  /* vertical-align: top; */
}
.header-title {
  width: 600px;
  height: 50px;
}
.content {
  height: 215px;
  width: 700px;
}

.header-title h1 {
  font: 700 28px/38px PingFangSC-Regular, HelveticaNeue-Light,
    'Helvetica Neue Light', 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  height: 38px;
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-start;
}

.writer-style {
  margin-left: 20px;
}
/* 作者 */
.writer {
  color: #666;
  font-size: 14px;
}

p.content-text {
  font-size: 17px;
  line-height: 24px;
  overflow: hidden;
  height: 100%;
  padding-left: 10px;
  color: #555;
}
.op-list {
  float: right;
  padding-right: 10px;
  padding-bottom: 3px;
}
.op-list i {
  font-size: 25px;
  margin-right: 25px;
}

/* 评论框 */
.comment-box {
  width: 690px;
  height: 45px;
  border-width: 1px;
  /* border-style: solid; */
  /* margin-right: 10px; */
  text-align: start;
}
.comment-up {
  margin-top: 10px !important;
  float: right;
  /* background-color: #39b2ee !important;
  border-color: #77b5d4 !important; */
}

/* 页头返回 */
.el-page-header__title {
  color: rgba(63, 6, 16, 0.849);
}
.source{
  padding:20px;
  border: 1px solid #ebebeb !important;
  border-radius: 3px;
}

/* footer */
.footer{
  margin-top: 10px;
  padding-top: 5px;
  text-align: center;
  color: #6F78A7;
}
</style>

